<template>
    <div>
        <Row type="flex">
            <Col span="8" order="1">
            <marvels-viewer :data="viewerData" :attachMents="attachMents" :fileParam="fileParam" :isScroll="isScroll"></marvels-viewer>
            </Col>
            <Col span="16" order="2">
            <Tabs v-model="curTab" @on-click="clickTab">
                <TabPane label="客户信息" name="customerInfo">
                    <customer-info-form :taskParams='taskParams'></customer-info-form>
                </TabPane>
                <TabPane label="贷款信息" name="loanInfo">
                    <loan-info-form :taskParams='taskParams'></loan-info-form>
                </TabPane>
                <TabPane label="审批结果" name="approvalResult">
                    <loan-approval-form :taskParams="taskParams"></loan-approval-form>
                </TabPane>
                <TabPane label="面签操作" name="facesigOperateInfo">
                    <facesig-operate :taskParams='taskParams'></facesig-operate>
                </TabPane>
                <TabPane label="流转记录" name="approvalLogInfo">
                    <approval-log :taskParams='taskParams'></approval-log>
                </TabPane>

            </Tabs>
            </Col>
        </Row>

    </div>
</template>

<script>
import customerInfoForm from '../../approval-management/task-processing/customerInfoForm.vue'
import loanInfoForm from '../../approval-management/task-processing/loanInfoForm.vue'
import facesigOperate from './facesigOperate.vue'
import approvalLog from './approvalLog.vue'
import loanApprovalForm from './loanApprovalForm.vue'
import marvelsViewer from '../../components/marvels-viewer.vue'
import attachmentTypeData from '../../components/attachment-type-data.js'

export default {
  components: {
    customerInfoForm, // 客户信息
    loanInfoForm, // 贷款信息
    facesigOperate, // 面签操作
    approvalLog,
    loanApprovalForm,
    marvelsViewer
  },
  data () {
    return {
      viewerData: [],
      fileParam: {
        url: '',
        isShow: false
      },
      isScroll: true,
      attachMents: [],
      // {
      //     label: '身份证',
      //     children: [
      //         {
      //             label: '身份证正面',
      //             src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526911041826&di=0da991a37474574a96bfee54d69b5ff6&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fexp%2Fw%3D480%2Fsign%3D60e30eebd2c8a786be2a4b065708c9c7%2F962bd40735fae6cd3e7505700cb30f2443a70fd9.jpg'
      //         },
      //         {
      //             label: '身份证反面',
      //             src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526911041821&di=4ed276b0a6d6192d9167c29606350416&imgtype=0&src=http%3A%2F%2Fp19.qhimg.com%2Ft01e41f04fe62724da1.jpg'
      //         }
      //     ]
      // },
      // {
      //     label: '房产相关图片',
      //     children: [
      //         {
      //             label: '001',
      //             src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526911111616&di=cbff46a453cf48e588c2ed1a4db9c1ec&imgtype=0&src=http%3A%2F%2Fwww.hhinfo.ac.cn%2Fwcm.files%2Fupload%2FCMShhkjj%2F201609%2F201609301025046.jpg'
      //         },
      //         {
      //             label: '002',
      //             src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2116275205,2726731435&fm=27&gp=0.jpg'
      //         },
      //         {
      //             label: '003',
      //             src: 'https://bpic.588ku.com/PPt_origin_pic/pptyj/00/00/43/pptyj/8e3692c857b5a51a51cfff7e6e8e210c.jpg-0.jpg!rh1300/fw/892/quality/90/unsharp/true/compress/true'
      //         }
      //     ]
      // },
      // {
      //     label: '合同',
      //     children: [
      //         {
      //             label: '001',
      //             type: 'pdf',
      //             src: 'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
      //         }
      //     ]
      // }
      // ],
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      curTab: '',
      curLoanId: this.$route.query.loanId,
      taskParams: {// 传递给子tab的参数对象
        curLoanId: this.$route.query.loanId,
        customerInfo: false,
        loanInfo: false,
        approvalResult: false,
        facesigOperateInfo: false,
        loanApprovalForm: false,
        approvalLogInfo: false,
        collapseCotrol: true
      },
      headData: []
    }
  },
  methods: {
    initpage: function () {
      var vm = this
      var url = this.baseUrl + 'approve/process/task_process/service/getLoanInfo/' + this.$route.query.loanId
      this.$ajax.get(url).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.loanInfoForm = data.data
      }).catch(er => {

      })
      // 获取映像文件
      var LaAttachmentDTO = {'loanId': this.$route.query.loanId}
      this.$ajax.post(this.baseUrl + 'approve/video/service/getAttachmentInfo', LaAttachmentDTO).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.error(message)
          return
        }
        vm.initMediaData(data.data)
      }).catch(er => {

      })
    },
    initMediaData (data) {
      var list = []
      if (data && data.length > 0) {
        var baseSrc = this.$appContext.marvels_core_approve + 'approve/credit/intbank/service/loadAttachmentById/'
        for (var i = 0; i < data.length; i++) {
          var viewAttach = {}
          viewAttach.label = data[i].atmtTypeName
          var attachmentList = data[i].laAttachmentDTOList
          var viewList = []
          if (attachmentList && attachmentList.length > 0) {
            for (var j = 0; j < attachmentList.length; j++) {
              let label = attachmentTypeData[attachmentList[j].atmtType] + '_' + (j + 1)
              if ((attachmentList[j].atmtType === 'A' || attachmentList[j].atmtType === 'YH') && attachmentList[j].fileName !== '' && attachmentList[j].fileName !== null) {
                label = attachmentList[j].fileName
              }
              let fileLocation = attachmentList[j].fileLocation
              if (!fileLocation) fileLocation = ''
              let fileName = attachmentList[j].fileName
              if (!fileName) fileName = ''
              viewList.push({
                label: label,
                src: baseSrc + attachmentList[j].id,
                type: fileLocation.substring(fileLocation.lastIndexOf('.') + 1),
                fileType: attachmentList[j].atmtType,
                url: fileLocation
              })
            }
            viewAttach.children = viewList
            list.push(viewAttach)
          }
        }
      }
      this.viewerData = list
    },
    // 点击tab事件
    clickTab (tabName) {
      this.taskParams[tabName] = true
    }
  },
  computed: {

  },
  mounted () { // 初始化客户信息
    this.taskParams['customerInfo'] = true
  },
  created () {
    // var params = this.$route.query || {};
    // if(!params || params.loanId==null || params.loanId==""){
    //     this.$Message.warning("贷款产品申请编号为空");
    //     return;
    // }
    this.curLoanId = this.$route.query.loanId
    this.$ajax = this.$util.ajax()
    this.taskParams[this.curTab] = true
    this.initpage()
  },
  watch: {

  }
}
</script>

<style lang="less">
.task-process-detail-select {
  width: 168px;
}
</style>
